<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>涂层挂挂卡</title>
<style>
    html,body{margin:0;height:100%;display:flex;align-items:center;justify-content:center;background:#fafafa;font-family:Arial,Helvetica,sans-serif}
    .card{position:relative;width:220px;height:90px;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.25)}
    .prize{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#222;background:#fff}
    #canvas{cursor:crosshair;display:block}
</style>
</head>
<body>
<div class="card">
    <!-- 真正奖品 -->
    <div class="prize" id="prize"></div>
    <!-- 涂层画布 -->
    <canvas id="canvas" width="220" height="90"></canvas>
</div>

<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const prizeEl = document.getElementById('prize');

    /* ========= 奖品 ========= */
    const gifts = ['一等奖','二等奖','三等奖','谢谢参与','再来一次'];
    prizeEl.textContent = gifts[Math.floor(Math.random()*gifts.length)];

    /* ========= 绘制银色涂层 ========= */
    function drawCoating(){
        ctx.save();
        // 渐变让涂层更“金属”
        const g = ctx.createLinearGradient(0,0,220,90);
        g.addColorStop(0,'#e8e8e8');
        g.addColorStop(.5,'#c8c8c8');
        g.addColorStop(1,'#a8a8a8');
        ctx.fillStyle = g;
        ctx.fillRect(0,0,220,90);
        // 再来点随机噪点，更像刮刮银
        const imgData = ctx.getImageData(0,0,220,90);
        for(let i=0;i<imgData.data.length;i+=4){
            const rand = Math.random();
            imgData.data[i] *= rand;
            imgData.data[i+1] *= rand;
            imgData.data[i+2] *= rand;
        }
        ctx.putImageData(imgData,0,0);
        ctx.restore();
    }
    drawCoating();

    /* ========= 刮开逻辑 ========= */
    let isDrawing = false;
    canvas.addEventListener('mousedown',()=>isDrawing=true);
    canvas.addEventListener('mouseup',()=>isDrawing=false);
    canvas.addEventListener('mousemove',(e)=>{
        if(!isDrawing) return;
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        ctx.globalCompositeOperation = 'destination-out';
        ctx.beginPath();
        ctx.arc(x,y,20,0,Math.PI*2);
        ctx.fill();
        checkRevealed();
    });

    /* 当刮开 60% 以上时自动全清 */
    function checkRevealed(){
        const data = ctx.getImageData(0,0,220,90).data;
        let transparent = 0;
        for(let i=3;i<data.length;i+=4) if(data[i]===0) transparent++;
        if(transparent/data.length>.6) ctx.clearRect(0,0,220,90);
    }

    /* 移动端兼容 */
    canvas.addEventListener('touchstart',e=>{isDrawing=true;e.preventDefault()});
    canvas.addEventListener('touchend',()=>isDrawing=false);
    canvas.addEventListener('touchmove',e=>{
        if(!isDrawing) return;
        const t = e.touches[0];
        const rect = canvas.getBoundingClientRect();
        const x = t.clientX - rect.left;
        const y = t.clientY - rect.top;
        ctx.globalCompositeOperation = 'destination-out';
        ctx.beginPath();
        ctx.arc(x,y,20,0,Math.PI*2);
        ctx.fill();
        checkRevealed();
        e.preventDefault();
    });
</script>
</body>
</html>